<template>
    <el-main class="mainBox">
        <el-tabs v-if="!isDetails" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="所有订单" name="soTheOrder">

               <OrderList 
                    ref="orderList"
                    v-if="activeName=='soTheOrder'" 
                    :isMore="isMore"
                    :search="search"
                    :handleIsDetails="handleIsDetails" 
                    :activeName="activeName" />

            </el-tab-pane>
            <el-tab-pane label="待付款" name="bePaid">

                <OrderList 
                    ref="orderList"
                    v-if="activeName=='bePaid'" 
                    :isMore="isMore"
                    :search="search" 
                    :handleIsDetails="handleIsDetails" 
                    :activeName="activeName" />

            </el-tab-pane>
            <el-tab-pane label="已付款" name="Paid">

                <OrderList 
                    ref="orderList"
                    v-if="activeName=='Paid'" 
                    :isMore="isMore"
                    :search="search" 
                    :handleIsDetails="handleIsDetails" 
                    :activeName="activeName" />

            </el-tab-pane>
            <el-tab-pane label="待续费" name="continuationFee">

                <OrderList 
                    ref="orderList"
                    v-if="activeName=='continuationFee'" 
                    :isMore="isMore"
                    :search="search" 
                    :handleIsDetails="handleIsDetails" 
                    :activeName="activeName" />

            </el-tab-pane>
            <el-tab-pane label="已取消" name="cancelled">

                <OrderList 
                    ref="orderList"
                    v-if="activeName=='cancelled'" 
                    :isMore="isMore"
                    :search="search" 
                    :handleIsDetails="handleIsDetails" 
                    :activeName="activeName" />

            </el-tab-pane>
        </el-tabs>
        <div class="search" v-if="!isDetails">
            <el-input size="small" placeholder="输入商品标题或订单号进行搜索" v-model="search" @keyup.enter.native="handleSearch" class="input-with">
                <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
            </el-input>
            <el-dropdown trigger="click" @command="handleCommand">
                <span class="el-dropdown-link">
                    {{screenName}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="1">更多筛选条件</el-dropdown-item>
                    <el-dropdown-item command="2">精简筛选条件</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>

        <OrderDetails v-if="isDetails" :handleIsDetails="handleIsDetails" :orderDetail="orderDetail" />
    </el-main>
</template>

<script src="./user.order.js"></script>
<style lang="scss" src="./user.order.scss"></style>